<template>
  <scroll-view class="page">
  	<view class="fixed">
  		<cu-custom :bgColor="'#000'" :isBack="true">
  			<block slot="content">搜索</block>
  		</cu-custom>
  	</view>
		<view class="page-content">
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==tabCur?'text-orange cur':''" v-for="(item,index) in tabData" :key="index" @tap="tabSelect" :data-id="index">
						{{ item }}
					</view>
				</view>
			</scroll-view>
			<view v-for="(item,index) in tabData" :key="index" v-if="index==tabCur" class="text-center padding">
				<view class="cu-bar bg-white solid-bottom">
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<input v-model="musicSearch.keywords" :adjust-position="false" type="text" :placeholder="item+'音乐搜索'" confirm-type="search" @confirm='searchMusic()'></input>
					</view>
				</view>
				<scroll-view scroll-y style="height: 80vh;">
					<view v-for="(m,i) in musicData" class="music-view">
						<view class="music-top">
							{{ m.name }} - {{ m.singer }}
						</view>
						<text class="music-play" @click="playMusic(m,1)">
							<text class="cuIcon-playfill lg"></text>
						</text>
						<text class="music-download" @click="playMusic(m,2)">
							<text class="cuIcon-down lg"></text>
						</text>
						<view class="music-bottom">[{{ m.interval }}] {{ m.albumName==''?'未知專輯':m.albumName }}</view>
					</view>
					<view class="music-more" v-show="scrollMore">
						<button class="cu-btn block line-orange margin-tb-sm lg" @tap="getMoreMusic()">
							<text :class="[' cuIconfont-spin', scrollLoading?'cuIcon-loading2':'']"></text> 加载更多
						</button>
					</view>
				</scroll-view>
			</view>
		</view>
	</scroll-view>
</template>
<script>
export default {
  data() {
    return {
			tabData: [
				'芸芸',
				'小蜗',
				'大黄',
				'企鹅',
				'芒果'
			],
			sourceData: [
				'wy',
				'kw',
				'kg',
				'tx',
				'mg'
			],
			musicAll: [
				[],
				[],
				[],
				[],
				[]
			],
			musicData: [],
			timer: null,
			tabCur: 0,
			scrollLeft: 0,
			scrollMore: false,
			scrollLoading: false,
			musicSearch: {
				source: 'wy',
				keywords: '',
				page: 1,
				size: 10
			}
    };
  },
  onLoad() {},
  onPullDownRefresh() {
		// 下拉查询
		//this.musicSearch.page = 1
		//this.musicSearch.size = 10
		//this.searchMusic()
	},
	onReachBottom() {
		//阻止重复加载
		//if(this.timer != null){
		//	clearTimeout(timer)
		//}
		//this.timer = setTimeout(() => this.getMoreMusic(), 1000)
	},
  methods: {
		tabSelect(e) {
			this.tabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			this.musicSearch.source = this.sourceData[this.tabCur]
			this.musicData = this.musicAll[this.tabCur]
			this.scrollMore = this.musicData.length > 0
		},
		getMoreMusic() {
			let self = this
			//uni.showNavigationBarLoading()
			this.scrollLoading = true
			this.musicSearch.page++
			this.$http.get('/music/mc/search', this.musicSearch, {tk: 'e920e52fad7edc74287d6fd7f5e56546'}, {})
				.then(res => {
					if (res.total > 0) {
						self.musicAll[self.tabCur].push.apply(self.musicData, res.list)
						self.musicData.push.apply(self.musicData, res.list)
					} else {
						uni.showToast({
							title: '啊哦，数据找不到了',
							icon: 'none'
						});
					}
					self.scrollLoading = false
					// 停止下拉样式
					//uni.stopPullDownRefresh()
					// 隐藏标题读取
					//uni.hideNavigationBarLoading()
				})
		},
		searchMusic() {
			let self = this
			this.musicData.splice(0,this.musicData.length)
			this.$http.get('/music/mc/search', this.musicSearch, {tk: 'e920e52fad7edc74287d6fd7f5e56546'}, {})
				.then(res => {
					if (res.total > 0) {
						self.musicAll[self.tabCur] = res.list
						self.musicData = res.list
						self.scrollMore = true
					} else {
						uni.showToast({
							title: '啊哦，数据找不到了',
							icon: 'none'
						});
					}
				})
		},
		playMusic(songinfo, type) {
			let id = songinfo.songmid
			let ss = songinfo.types[0].type || '128k'
			let self = this
			uni.showLoading({
				title: '加载音乐...',
				mask: true
			})
			this.$http.get('/music/mc/song/url', {songmid: id, source: this.musicSearch.source, songsize: ss}, {tk: 'e920e52fad7edc74287d6fd7f5e56546'}, {})
				.then(res => {
					if (type == 1) {
						console.log(res)
						uni.hideLoading()
						const bgAudioMannager = uni.getBackgroundAudioManager()
						bgAudioMannager.title = songinfo.name
						bgAudioMannager.singer = songinfo.singer
						bgAudioMannager.coverImgUrl = songinfo.img
						bgAudioMannager.src = res.url
					} else if (type == 2) {
						uni.setClipboardData({
							data: res.url,
							success: function(res) {
								uni.getClipboardData({
									success: function(res) {
										uni.showToast({
											icon: 'none',
											title: '复制音乐链接成功，请前往浏览器粘贴后自行下载',
											duration: 3000
										});
									}
								});
							}
						});
					}
				}).catch(e => {
					uni.hideLoading()
					uni.showToast({
						title: e.data.msg,
						icon: 'none',
						duration: 2000
					});
				})
		}
	}
};
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		overflow: hidden;
		background-color: #fff;
		.fixed {
			position: fixed;
			z-index: 99;
		}
		.page-content {
			margin-top: 12vh;
			.music-view {
				position: relative;
				width: 90%;
				text-align: left;
				margin: 60rpx 30rpx;
				.music-top {
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				.music-bottom {
					color: #555555;
				}
				.music-play {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					display: inline-block;
					width: 50rpx;
					height: 50rpx;
				}
				.music-download {
					position: absolute;
					top: 10rpx;
					right: -50rpx;
					display: inline-block;
					width: 50rpx;
					height: 50rpx;
				}
			}
			.music-more {
				margin: 20rpx 0 150rpx 0;
			}
		}
	}
</style>
